<template>
  <div class="app">
    <h2>我是App组件（祖先组件）</h2>
    <ul>
      <li>汽车名称：{{name}}</li>
      <li>汽车价格：{{price}}</li>
    </ul>

    <Child></Child>
  </div>
</template>

<script>
  import { reactive, toRefs, provide } from 'vue';
  import Child from './components/Child.vue';

  export default {
    name: 'App',
    components: {
      Child: Child,
    },
    setup() {
      let car = reactive({
        name: '奔驰',
        price: '40w',
      });

      // 给自己的后代组件传递数据
      provide('car', car);

      return {
        car,
        ...toRefs(car)
      }
    }
  }
</script>
<style lang="css">
  .app {
    background-color: tan;
    padding: 10px;
  }
</style>